<template>
  <div id="login_two">
    <div @click="back" class="back"><van-icon name="arrow-left" />返回</div>
    <p class="tit">账号密码登录</p>
    <div class="cont">
      <div class="cli" @click="change">
        <transition name="van-slide-up">
          <div id="full" v-show="visible">
            <div class="full_cont">登录前请先勾选</div>
            <div class="san_bot"></div>
            <div class="san_top"></div>
          </div>
        </transition>
        <van-icon class="vi" v-if="!van" name="passed" />
        <van-icon class="vi vc" v-else name="checked" />
      </div>
      已详读并同意 <span>豆瓣使用协议、个人信息保护政策</span>
      <van-icon @click="cleartext" v-show="clear" class="clear" name="clear" />
      <input
              @input="textblur"
              type="text"
              v-model="input_top"
              placeholder="请输入用户名（手机号/邮箱）"
      />
      <p class="proof">{{ protext }}</p>
      <van-icon @click="input_eye" v-show="eye" class="eye" name="eye" />
      <input
              @input="passblur"
              ref="pass"
              type="password"
              v-model="input_bot"
              placeholder="请输入密码（8-16位）"
      />

      <p class="proof">{{ propass }}</p>
      <button @click="login" ref="but" :disabled="disabled" class="login">
        登录
      </button>
      <div @click="$router.push('/reg')" id="reg">注册账号</div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        van: false,
        clear: false,
        eye: false,
        input_top: "",
        input_bot: "",
        disabled: true,
        visible: false,
        time: null,
        protext: "",
        propass: "",
        time2: "",
      };
    },
    methods: {
      cueone() {
        if (
                (this.clear === true) &
                (this.eye === true) &
                (this.propass === "") &
                (this.protext === "")
        ) {
          this.$refs.but.style.backgroundColor = "#22c03a";
          this.disabled = false;
        } else {
          this.disabled = true;
          this.$refs.but.style.backgroundColor = "#B1E4B9";
        }
      },
      back() {
        this.$router.push("/login");
        this.$notify.clear();
      },
      //改变协议勾选状态
      change() {
        this.van = !this.van;
        if (this.van === true) {
          this.visible = false;
          clearTimeout(this.time);
        }
      },
      //验证
      textblur() {
        /* const regE = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
         const regT = /^1([38][0-9]|4[5-9]|5[0-3,5-9]|66|7[0-8]|9[89])[0-9]{8}$/;
         //验证用户名
         if (!regT.test(this.input_top) & !regE.test(this.input_top)) {
           this.protext = "用户名有误";
         } else {
           this.protext = "";
         }*/
      },
      passblur() {
        /*const regP = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;

        if (!regP.test(this.input_bot)) {
          this.propass = "密码有误";
        } else {
          this.propass = "";
        }*/
      },
      //点击图标清除input中的内容
      cleartext() {
        this.input_top = "";
      },
      //点击眼睛图标改变input框的type属性
      input_eye(e) {
        if (this.$refs.pass.type === "password") {
          this.$refs.pass.type = "text";
          e.target.style.color = "rgb(77, 74, 74)";
        } else {
          this.$refs.pass.type = "password";
          e.target.style.color = "#aaa";
        }
        this.$refs.pass.focus();
      },
      //登录触发的事件
      login() {
        //防抖
        if (this.time !== null) {
          clearTimeout(this.time);
        }
        //如果协议没有勾选，弹框提示
        if (this.van === false) {
          this.visible = true;
          this.time = setTimeout(() => {
            this.visible = false;
          }, 2000);
        }
        //发送请求
        else {
          console.log(this.input_top)
          console.log(this.input_bot)
          this.$http
                  .post("http://192.168.1.18:81/sso/denglu", {
                    username: this.input_top,
                    password: this.input_bot,
                  })
                  .then((res) => {
                    if (res.data.code === 2000) {
                      sessionStorage.setItem("token", res.data.data.uuid);
                      sessionStorage.setItem("userid",res.data.data.userid);
                      this.$notify({
                        type: "success",
                        message: res.data.msg,
                        duration: 800,
                      });
                    }else{
                      this.$notify({
                        type: "danger",
                        message: res.data.msg,
                        duration: 800,
                      });
                    }
                    /*this.$notify({
                      type: "success",
                      message: res.data.message,
                      duration: 800,
                    });*/
                    if (this.time2 != null) {
                      clearTimeout(this.time2);
                    }
                    this.time2 = setTimeout(() => {
                      if (res.data.code === 2000) {
                        this.$router.push("/index");
                      }
                    }, 1000);
                  });
        }
      },
    },
    watch: {
      //监听用户名
      input_top() {
        if (this.input_top) {
          this.clear = true;
          this.cueone();
        } else {
          this.clear = false;
          this.protext = "";
        }
      },
      //监听密码
      input_bot() {
        if (this.input_bot) {
          this.eye = true;
          this.cueone();
        } else {
          this.eye = false;
          this.propass = "";
        }
      },
    },
  };
</script>

<style>
</style>